<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.media.js"></script>
</head>
<body>
<script type="text/javascript">

function previsualizarPFD(){
	
	$('a.media').media({width:500, height:400});
}

/** subir fichero al servidor y genera ruta (http://localhost:8080/PruebasWeb/TEMP/) **/
/*
function obtenerDireccion(){
	
	var CarpetaServer = "http://localhost:8080/PruebasWeb/TEMP/";
	var nombrefichero = $('#inputFichero').val();
	/**añadir href al ancla del media
	$('#linkFichero').attr("href", CarpetaServer+nombrefichero);
	
}**/

$(document).ready(function(){
	
	$('#inputFichero').change(function(event){
		
		//llamada ajax
		var file = event.target.files[0];
		
		var data = new FormData();
		jQuery.each(event.target.files, function(i, file) {
		    data.append('file-'+i, file);
		});
		
		
        $.ajax(
            {
                beforeSend: function(xhr)
                {
                    xhr.setRequestHeader("X_FILENAME", file.name);
                },
                type: 'GET',
                url: 'ServletFormRequest',
                contentType: 'multipart/form-data',
                processData: false,
                data: data,
                success: alert("hecho")
            }
        );
		
	});	//cierre de evento change del input file
});//cierre de documen ready

</script>




		<h1>Formulario de entrada de datos</h1>
		
		<form action="ServletFormRequest" method="post" enctype="multipart/form-data">
			<p>
			<input type="text" name="campo1" placeholder="introduce campo1" title="intorduce el campo que te de la gana">		
			</p>
			<p>
			<input type="text" name="campo2" placeholder="introduce campo2">		
			</p>
			<p>
			<input type="text" name="campo3" placeholder="introduce campo2">		
			</p>
			<p>
			<input id="inputFichero" type="file" name="fichero" placeholder="introduce fichero a cargar" >
			<input type="button" name="previsualizar" value="previsualizar" onclick="previsualizarPFD()">
			
			<a id="linkFichero" class="media" href="" >pdf de prueba</a>	
			<!-- "http://localhost:8080/PruebasWeb/TEMP/ConvencionesCodigoJava.pdf" -->	
			</p>
			<input type="submit" value="enviar">
		</form>
		
		<!-- Dibujar campos enviados -->
		<% String campo1=(String) request.getAttribute("campo1");
			String campo2=(String) request.getAttribute("campo2");
			String campo3=(String) request.getAttribute("campo3");
			if(campo1!=null & campo2!=null& campo3!=null){
			out.print("<p>" + campo1  + "</p>");
			out.print("<p>" + campo2  + "</p>");
			out.print("<p>" + campo3  + "</p>");
			}
			String ficheroGuardado= (String) request.getAttribute("archivoguardado");
			String nombrefichero=(String) request.getAttribute("nombrefichero");
			if(ficheroGuardado!=null){
				out.print("<h3>"+ficheroGuardado+ " " + nombrefichero +"</h3>");
			}
		%>
</body>
</html>